var THREE;
var renderer;
let scene;
let camera;
let spaceship;
let controls;

const Width = document.getElementById('my3d').clientWidth;
const Height =(document.getElementById('my3d').clientWidth);


function init() {

    renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('mainCanvas'),
        antialias: true, // true/false表示是否开启反锯齿
        alpha: true, // true/false 表示是否可以设置背景色透明
        premultipliedAlpha: false, // true/false 表示是否可以设置像素深度（用来度量图像的分辨率）
        preserveDrawingBuffer: true, // true/false 表示是否保存绘图缓冲
        maxLights: 3, // 最大灯光数
        stencil: false // false/true 表示是否使用模板字体或图案
    });

    renderer.setSize(Width,Height);

    scene = new THREE.Scene();

    //创建相机对象
    camera = new THREE.PerspectiveCamera(100, Width / Height, 0.1, 5000000);
    //camera=new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,5000);
    //设置相机位置
    camera.position.set(0, 0, 40000);

    //设置相机方向（指向场景对象）
    camera.lookAt(scene.position);
    //添加相机到场景对象中
    scene.add(camera);

    //光源设置
    //点光源设置
    directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    //设置点光源对象的角度
    directionalLight.position.set(0, 0, 350);
    //聚焦坐标
    directionalLight.lookAt(new THREE.Vector3(0, 0, 0));
    //添加点光源到场景对象中
    scene.add(directionalLight);
    //环境光
    const ambient=new THREE.AmbientLight(0x756841);
    //添加环境光到场景对象中
    scene.add(ambient);

    //加载obj文件
    loadOBJ();

    //创建控件对象， 相机camera对象作为参数 控件可监听鼠标的变化，对应的改变相机的属性
 /*   controls= new THREE.OrbitControls(camera);
    //是否可旋转，旋转速度
    controls.enableRotate = true;
    controls.rotateSpeed = 0.3;
    //惯性滑动，滑动大小默认0.25
    controls.enableDamping = false;
    controls.dampingFactor = 0.25;
    //是否自动旋转，自动旋转速度。默认每秒30圈
    controls.autoRotate = false;
    controls.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60

    //监听鼠标事件，触发渲染方法，更新renderer场景渲染器（canvas）的画布渲染效果
    controls.addEventListener('change', render);*/
}

//加载模型和材质
const loadOBJ = function() {
    const mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath('obj/');
    mtlLoader.load('qq.mtl', function(materials) {

        materials.preload();

        const objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.setPath('obj/');
        objLoader.load('qq.obj', function(object) {
            spaceship = object;
            //设置模型的角度
            spaceship.rotation.x = 0;
            spaceship.position.y = 0;
            spaceship.position.z = 0;
            //添加模型到场景
            scene.add(spaceship);
            render();
        });

    });
};

//设置周期性旋转旋转渲染模型
const render = function() {
    requestAnimationFrame(render);
    spaceship.rotation.y +=.005;
    renderer.render(scene, camera);
};

init();